<template>
	<view class="contens">
		
		<view class="tabs">
			<u-tabs ref="tabs" :list="tabs" active-color="#2979ff" inactive-color="#606266" font-size="30"
				:current="current" @click="change"></u-tabs>
		</view>
		<view class="taglist" v-if="current==0">
			<view class="rank">
				<social-list :social="social"></social-list>
			</view>
		</view>
		<view class="noticelist" v-if="current==1">

			<view class="rank">
				<notice-list :notice="notice"></notice-list>
			</view>
		</view>
		<view class="taglist" v-if="current==2">
			<view class="rank">
				<social-list :social="social"></social-list>
			</view>
			
		</view>
<u-loadmore :status="status" />
	</view>
</template>

<script>
	import {
		findsocialList,
		findNoticeList
	} from "@/nxTemp/apis/social.js"

	let userId = uni.getStorageSync("userId") || 0;
	export default {
		data() {
			return {
				isBack: false,
				title: " ",
				tabs: [{
					name: '分享'
				}, {
					name: '百科'
				}, {
					name: '关注',
				}],
				current: 0,
				showAction: true,
				isFixed: true,
				keyword: '',
				background: {
					backgroundColor: '#fff',
				},
				social: [],
				notice: [],
				pages: 1,
				activeColor: '#434343',
				cut: 0,
				status: "loading",
			}
		},
		mounted() {
			this.getsocial({
				"isFocus": 0,
				"isNearby": 0,
				"key": "",
				"lat": "",
				"lng": "",
				"nowPage": 1,
				"pageSize": 20,
				"pushType": "",
				"pushUserId": 0,
				"userId": userId
			})
		},
		onShow() {
			let user = uni.getStorageSync("user");
			if (!user) {
				user = '';
			}
			this.user = user;
		},
		onReachBottom() {

			if (this.current == 0 && !this.isLastPage) {
				this.getsocial({
					isFocus: 0,
					isNearby: 0,
					key: "",
					lat: "",
					lng: "",
					nowPage: this.pages,
					pageSize: 20,
					pushType: "",
					pushUserId: 0,
					userId: userId,
				})
			} else if (this.current == 1 && !this.isLastPage) {
				this.noticeReviewList({
					key: "",
					noticeType: 0,
					nowPage: 1,
					pageSize: 20
				})
			} else if (this.current == 2 && !this.isLastPage) {
				this.getMessages({
					pageNo: this.pages,
					pageSize: 20,
					isFocus: 1,
					isNearby: 0,
					userId: userId,
					pushUserId: 0,
					key: "",
					lat: "",
					lng: "",
					pushType: "",
				});
			}

		},
		methods: {
			getsocial: function(args) {
				findsocialList(args).then(res => {
						if (res.length < 20) {
							this.isLastPage = true;
							this.status = "nomore"
						}
						this.pages = this.pages + 1
						this.social = this.social.concat(res.socialDtoPage.records)

					})
					.catch(err => {})
			},
			change: function(e) {

				this.current = e.index;
				this.social = [];
				this.pages = 1;
				this.notice = [];
				this.status = "loading";
				this.sicial = [];
				this.isLastPage = false;
				switch (e.index) {

					case 0:
						this.getsocial({
							pageNo: this.pages,
							pageSize: 20,
							isFocus: 0,
							isNearby: 0,
							userId: userId,
							pushUserId: 0,
							key: "",
							lat: "",
							lng: "",
							pushType: ""
						});
						break;
					case 1:
						this.noticeReviewList({
							key: "",
							noticeType: 0,
							nowPage: 1,
							pageSize: 20
						});
						break;
					case 2:
						this.getMessages({
							pageNo: this.pages,
							pageSize: 20,
							isFocus: 1,
							isNearby: 0,
							userId: userId,
							pushUserId: 0,
							key: "",
							lat: "",
							lng: "",
							pushType: ""
						});

				}
			},

			noticeReviewList: function(data) {
				findNoticeList(data).then(res => {
					
						this.notice = this.notice.concat(res.records);
						this.pages = this.pages + 1;
					})
					.catch(err => {
						err
					})
			},


			getMessages: function(args) {
				findsocialList(args).then(res => {
					if (res.pageNum == res.pageNum) {
						this.isLastPage = true
					}
					
					if (res.socialDtoPage.total == 0) {
						uni.showToast({
							icon: 'none',
							title: '还没动态，快去发布！'
						});
						return;
					}
					console.log(res.socialDtoPage.records)
					this.social = this.social.concat(res.socialDtoPage.records)
					this.pages = this.pages + 1
				}).catch(err => {
					console.error()
				})
			},

			onItemClick: function(id) {
				uni.navigateTo({
					url: '../message/message?id=' + id
				})
			}
		},

	}
</script>

<style lang="scss" scoped>
	.taglist {
		padding: 80rpx 30rpx;
	}

	.loading {
		padding-top: 30rpx;
	}

	.slot-wrap {
		padding: 20rpx 30rpx;
		width: 100%;
	}

	.tabs {
		position: fixed;
		z-index: 999;
		width: 100%;
		box-shadow: 0px 10px 50px #f9f9f9;
		background-color: rgba(255,255,255,1);
	}

	.noticelist {
		padding: 60rpx 0rpx;

		.rankMenu {
			padding: 60rpx 30rpx 30rpx 30rpx;
			position: fixed;
			width: 100%;
			background: #fff;
			z-index: 99;

			.active {
				color: #fff !important;
				background: #586d72 !important;
			}

			.menuItem {
				min-width: 10vw;
				padding: 0 20rpx;
				background-color: #f0f3f7;
				color: #97a9ac;
				height: 60rpx;
				border-radius: 60rpx;
				margin-right: 12rpx;
				font-size: 24rpx;
				display: inline-block;
				line-height: 60rpx;
				text-align: center;
			}
		}

		.rank {
			padding-top: 120rpx;
		}
	}

	.videolist {
		padding: 60rpx 0rpx;
	}

	.item-container {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		box-sizing: border-box;

		.item {
			position: relative;
			width: 100%;
			min-height: 216rpx;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: flex-start;
			box-sizing: border-box;
			padding: 0 32rpx;
			padding-top: 34rpx;
			padding-bottom: 32rpx;
			background: #FFFFFF;

			.item-avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 40rpx;
			}

			.item-middle {
				width: 480rpx;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: flex-start;
				box-sizing: border-box;
				margin-left: 24rpx;

				.item-middle-name {
					font-size: 28rpx;
					color: #576B95;
				}

				.item-middle-content {
					font-size: 28rpx;
					color: #333333;
					margin-top: 8rpx;
					font-weight: 500;
				}

				.item-middle-time {
					font-size: 24rpx;
					color: #999999;
					margin-top: 26rpx;
				}

				.item-right-text {
					position: absolute;
					width: 100rpx;
					right: 32rpx;
					line-height: 40rpx;
					text-align: center;
					align-self: center;
					font-size: 24rpx;
					color: #999999;
				}

				.item-right {
					position: absolute;
					right: 32rpx;
					width: 32rpx;
					height: 34rpx;
					align-self: center;
				}

			}
		}
	}
</style>
